import React from 'react';
import { Component } from 'react';
import IndexPage from 'root_path/pages/index/Index.jsx';
import { TabBar  } from 'antd-mobile';
require('./Navigation.less');


export default class Navagation extends Component {
    constructor() {
        super();
        this.state = {
            selectedTab: 'redTab'
        }
    }
    
    render() {
        return (
            <div className="wrapper">
                <TabBar unselectedTintColor="#949494" tintColor="#33A3F4"  barTintColor="white">
                    <TabBar.Item  
                        title="首页" 
                        key="index"
                        selected={this.state.selectedTab === 'redTab'}
                        onPress={() => {this.setState({selectedTab: 'redTab'})}}
                        icon={{uri:'https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg'}}
                        selectedIcon={{uri:'https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg'}}
                    ><IndexPage /></TabBar.Item>
                    <TabBar.Item  
                        title="发现" 
                        key="find" 
                        selected={this.state.selectedTab === 'greenTab'}
                        onPress={() => {this.setState({selectedTab: 'greenTab'})}}
                        icon={{uri:'https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg'}}
                        selectedIcon={{uri:'https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg'} }
                    >You</TabBar.Item>
                    <TabBar.Item
                        title="订单" 
                        key="order" 
                        selected={this.state.selectedTab === 'blueTab'}
                        onPress={() => {this.setState({selectedTab: 'blueTab'})}}
                        icon={{uri:'https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg'}}
                        selectedIcon={{uri:'https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg'}}
                    >Alan</TabBar.Item>
                    <TabBar.Item  
                        title="我的" 
                        key="mine" 
                        selected={this.state.selectedTab === 'yellowTab'}
                        onPress={() => {this.setState({selectedTab: 'yellowTab'})}}
                        icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
                        selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
                    >My</TabBar.Item>
                </TabBar>
            </div>
        );
    }
}